<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>帽儿山生态服务评估系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="dist/layui/css/layui.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <style>
        .layui-layout-body {
            width: 100%;
            height: 100%;
            background: url('dist/layui/image/load.jpg') no-repeat top left;
            position: relative;
            background-size: 100%
        }

        .load {
            position: absolute;
            right: 180px;
            top: 250px;
            background: rgba(0, 0, 0, .4);
            padding: 35px 25px;
            border-radius: 6px;

        }

        .layui-input {
            width: 250px;
            background: #777d83;
            color: #fff;
            border-radius: 5px;

            margin: 15px auto;
        }

        input::-webkit-input-placeholder {
            color: #fff;
        }

        input::-ms-input-placeholder {
            color: #fff;
        }

        .layui-btn-fluid {
            width: 250px;
            border-radius: 5px;
            margin-bottom: 10px;
        }

        .load p {
            font-size: 18px;
            color: #fff;
            margin-bottom: 22px;
            text-align: center;
       
        }
        .logo{
            padding: 44px 85px;
        }
        .spans{
            overflow: hidden;
            display: flex;
             justify-content: space-between;
             margin-bottom: 10px;
        }
    </style>
</head>

<body class="layui-layout-body">
    <div class="logo"><img src="dist/layui/image/logo2.png" /></div>
    <div class="load">
        <p>账号登录</p>
        <input type="text" name="title" required lay-verify="required" placeholder="请输入账号" autocomplete="off"
            class="layui-input">
        <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off"
            class="layui-input input2">
        <div class="spans">
            <div><input type="checkbox" name="记住密码" title="记住密码"> <span style="color: #fff;">记住密码</span></div>
            <span style="color: #5f9ecf;">忘记密码</span>
        </div>
        <button type="button" class="layui-btn layui-btn-fluid" onclick="load()">登陆</button>
    </div>

    <script src="dist/layui/layui.js" charset="utf-8"></script>
    <script src="dist/layui/jquery-3.5.0.js"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
    <script>

        function load() {
            let accout = $('.layui-input').val()
            let word = $('.input2').val()
            if (accout == '' || word == '') {
                layui.use('layer', function () {
                    var layer = layui.layer;
                    layer.open({
                        title: '',
                        content: '账号或密码不能为空'
                    });
                });
                return
            }
            $.ajax({
                // http://172.16.100.59:12000
                type: "POST",
                url: "/linda/login",
                data: {
                    username: accout,
                    password: word
                },
                xhrFields: {
                    withCredentials: true
                },
                dataType: "json",
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                success: function (data) {
                    if (data.code == 200) {
                        if (data.data.role == 1) {
                            window.location.href = 'maoer_code/src/admin.html'
                            window.localStorage.setItem('admin', JSON.stringify(data.data.nickname))

                        } else if (data.data.role == 2) {
                            window.location.href = 'maoer_code/src/map_shower.html'
                            window.localStorage.setItem('nickname', JSON.stringify(data.data.nickname))
                        }
                    } else {
                        layui.use('layer', function () {
                            var layer = layui.layer;
                            layer.open({
                                title: '',
                                content: '用户名或密码错误'
                            });
                        });
                    }
                },
                error: function (jqXHR) {
                    alert("发生错误");
                },
            });

        }


    </script>




</body>

</html>